<!-- 详情页（二级页面）水平左侧Tab，上滚时Tab固定 -->
<template>
  <div class="horizontal-tab">

    <div class="breadcrumb">
      您当前的位置：
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>
          <span style="color:#39ADFF;cursor:default;" @click="tohorizontalIndex">鰼国故里</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>习水旅游概况</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="horizontal-tab-con" id="horizonLog">
      <!-- 左侧菜单 -->
      <ul class="horizontal-ul"  :style="{marginLeft: marginLeftLong + 'px'}" :class="{activeStyle: activeShow}">
        <li class="horizontal-li"
          v-for="item in horizontalTabData"
          :key="item.id"
          :class="{classActive: item.id === numShow || item.id === numShowClick}"
          @click="horizontalTab(item.id)"
          @mouseenter="mouseenterTab(item.id)"
          @mouseleave="mouseleaveTab(item.id)">
          <img :src="guliDose" alt="">
          <span>{{item.value}}</span>
        </li>
      </ul>

      <!-- 右侧内容 -->
      <div class="horizontal-con" id="horizontal-con-offsetLeft"
        :class="{activeFixed: activeShow}">
        <div v-for="item in horizontalConData"
          :key="item.id">
          <!-- title -->
          <div class="title" :id="'horizontalId' + item.id">
            <img :src="item.img" alt="">
            <span>{{item.title}}</span>
            <hr style="height:2px; border:none; border-top:1px solid #555555">
          </div>
          <div class="horizontal-span">
            <horizontal-tab-1 v-if="item.id === '1'"></horizontal-tab-1>
            <horizontal-tab-2 v-else-if="item.id === '2'"></horizontal-tab-2>
            <horizontal-tab-3 v-else-if="item.id === '3'"></horizontal-tab-3>
            <horizontal-tab-4 v-else-if="item.id === '4'"></horizontal-tab-4>
            <div v-else-if="item.id === '5'">
              <horizontal-tab-5></horizontal-tab-5>
              <horizontal-tab-6></horizontal-tab-6>
              <br>
              <horizontal-tab-7></horizontal-tab-7>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import guliDose from '_as/guli-desc.png'
import guliDescImg1 from '_as/guli-desc-title-1.png'
import guliDescImg2 from '_as/guli-desc-title-2.png'
import guliDescImg3 from '_as/guli-desc-title-3.png'
import guliDescImg4 from '_as/guli-desc-title-4.png'
import guliDescImg5 from '_as/guli-desc-title-5.png'

import horizontalTab1 from './horizontal_tab_1'
import horizontalTab2 from './horizontal_tab_2'
import horizontalTab3 from './horizontal_tab_3'
import horizontalTab4 from './horizontal_tab_4'
import horizontalTab5 from './horizontal_tab_5'
import horizontalTab6 from './horizontal_tab_6'
import horizontalTab7 from './horizontal_tab_7'

import scrollAnimation from '@/api/scrollAnimation.js'

export default {
  name: 'Horizontal',
  data () {
    return {
      guliDose,
      bgStyle: false,
      numShow: '',
      numShowClick: '',
      activeShow: false,
      scrollLog: '',
      marginLeftLong: 0,
      horizontalTabData: [
        {
          id: '1',
          value: '习水旅游概况'
        },
        {
          id: '2',
          value: '习水地形'
        },
        {
          id: '3',
          value: '习水气候'
        },
        {
          id: '4',
          value: '人文历史'
        },
        {
          id: '5',
          value: '民风民俗'
        }
        // {
        //   id: '6',
        //   value: '历史文献'
        // }
      ],
      horizontalConData: [
        {
          id: '1',
          img: guliDescImg1,
          title: '习水旅游概况'
        },
        {
          id: '2',
          img: guliDescImg2,
          title: '习水地形'
        },
        {
          id: '3',
          img: guliDescImg3,
          title: '习水气候'
        },
        {
          id: '4',
          img: guliDescImg4,
          title: '人文历史'
        },
        {
          id: '5',
          img: guliDescImg5,
          title: '民风民俗'
        }
        // {
        //   id: '6',
        //   img: guliDescImg2,
        //   title: '历史文献'
        // }
      ]
    }
  },
  components: {
    horizontalTab1,
    horizontalTab2,
    horizontalTab3,
    horizontalTab4,
    horizontalTab5,
    horizontalTab6,
    horizontalTab7
  },
  computed: {},
  beforeCreate () {},
  created () {
    window.addEventListener('scroll', this.menu)
  },
  mounted () {
    this.initTabPosition()
  },
  watch: {
    '$route' (to, from) {
      switch (to.params.type) {
        case '1-1':
          this.horizontalTab('1')
          break
        case '1-2':
          this.horizontalTab('2')
          break
        case '1-3':
          this.horizontalTab('3')
          break
        case '1-4':
          this.horizontalTab('4')
          break
        case '1-5':
          this.horizontalTab('5')
          break
        default:
          break
      }
    }
  },
  methods: {
    horizontalTab (index) {
      this.numShow = ''
      this.numShowClick = index
      let horizontalIdItem = 'horizontalId' + index
      // let声明的变量可以改变，值和类型都可以改变，没有限制。
      // const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
      let horizontalAllCon = document.getElementById(horizontalIdItem).offsetTop - 70
      let needScrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || 0
      scrollAnimation(needScrollTop, horizontalAllCon)
    },
    mouseenterTab (index) {
      this.numShow = index
    },
    mouseleaveTab () {
      this.numShow = this.numShowClick
    },
    menu () {
      this.scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || window.scrollY
      let horizonLog = document.getElementById('horizonLog').offsetTop - 84
      if (this.scroll >= horizonLog) {
        this.activeShow = true
        this.offsetLeftLog()
      } else {
        this.activeShow = false
        this.marginLeftLong = 0
      }
    },
    offsetLeftLog () {
      const offsetLeftLong = document.getElementById('horizontal-con-offsetLeft').offsetLeft - 220
      this.marginLeftLong = offsetLeftLong
    },
    // 初始进入页面时左侧tab位置
    initTabPosition () {
      switch (this.$route.params.type) {
        case '1-1':
          this.horizontalTab('1')
          break
        case '1-2':
          this.horizontalTab('2')
          break
        case '1-3':
          this.horizontalTab('3')
          break
        case '1-4':
          this.horizontalTab('4')
          break
        case '1-5':
          this.horizontalTab('5')
          break
        case '1-6':
          this.horizontalTab('6')
          break
        default:
          break
      }
    },
    tohorizontalIndex () {
      this.$router.push('/birthland')
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.breadcrumb {
  padding 20px 0 20px 15%
  display flex
  align-items center
  margin-bottom 20px
  box-shadow 0 0 10px 2px #ddd
}

.horizontal-tab-con {
  display flex
  justify-content center
  .horizontal-ul {
    width 220px
    // background #F6F0EB
    display inline-block
    .horizontal-li {
      width 200px
      height 60px
      display flex
      justify-content flex-start
      align-items center
      // background #F6F0EB
      margin-bottom 2px
      padding-left 20px
      border-bottom 2px solid #fff
      cursor default
      img {
        width 26px
        height 26px
        padding-right 10px
      }
    }
  }
  .horizontal-con {
    width 1000px
    border-top 1px solid #ddd
    padding 15px
    display flex
    flex-direction column
    .title {
      display flex
      align-items center
      width 300px
      padding 15px 0
      img {
        height 35px
        width 12px
        margin 0 5px 0 0
      }
      span {
        font-size 28px
        color #25a8e5
      }
    }
    .horizontal-span {
      text-align left
      line-height 1.5
    }
  }
}

.classActive {
  background #F7E3D3 !important
}

.activeStyle {
  position fixed
  top 84px
  left 0
}
.activeFixed {
  margin-left 220px
}
</style>
